<template>
    <div class="wrappp">
        <div class="top_box"></div>
        <div class="person">
            <div class="tab">
                <div class="info" @click="()=>{this.$router.push('/personal')}">
                    <section class="login">
                        <div class="avatar">
                            <div class="img">
                                <img style="width: 60px;" :src="userInfo.avatar" alt/>
                            </div>
                            <img class="vip_logon" src="../../public/img/皇冠-2 拷贝@2x.ca9087bc.png" alt/>
                        </div>
                        <div class="extra">
                            <p class="name">{{userInfo.nickname}}</p>
                            <p class="icon">
                                <span class="iconfont icon-yixianshi-"></span>
                            </p>
                        </div>
                    </section>
                </div>
                <div class="mine">
                    <div class="my_study">
                        <p class="count">{{centerInfoItem.courses}}</p>
                        <!-- {{centerInfoItem.courses}} -->
                        <p class="name">我的特色课</p>
                        <p class="note">已购特色课程的学习</p>
                    </div>
                    <div class="my_plan">
                        <p class="count">{{centerInfoItem.oto}}</p>
                        <!-- {{centerInfoItem.oto}} -->
                        <p class="name">一对一辅导</p>
                        <p class="note">我的一对一老师辅导</p>
                    </div>
                    <div class="my_period">
                        <p class="count">{{centerInfoItem.integral | prices}}</p>
                        <!-- {{centerInfoItem.integral}} 不知道是不是接口如果是的话直接换上就行了-->
                        <p class="name">剩余学习币</p>
                        <p class="note">查看剩余学习币</p>
                    </div>
                </div>
                <div class="to_set">
                    <span>去约课</span>
                </div>
            </div>
            <div class="top_share">
                <div class="box">
                    <span class="iconfont icon-xinfeng"></span>
                    <div>
                        <p>邀请好友注册APP，享多重好礼</p>
                        <p>限时特惠，多邀多得</p>
                    </div>
                </div>
            </div>
            <ul class="menu_box">
                <li>
                    <p class="title">课程相关</p>
                    <div class="item_box">
                        <div class="item" @click="()=>{this.$router.push('/attention')}">
                            <p class="iconfont icon-iconleijiguanzhu icon"></p>
                            <p class="text">关注的老师</p>
                        </div>
                        <div class="item" @click="()=>{this.$router.push('/collect')}">
                            <p class="iconfont icon-wodeshoucang icon"></p>
                            <p class="text">我的收藏</p>
                        </div>
                    </div>
                </li>
                <li>
                    <p class="title">订单相关</p>
                    <div class="item_box">
                        <div class="item">
                            <p class="iconfont icon-icon iconOrder"></p>
                            <p class="text">课程订单</p>
                        </div>
                        <div class="item">
                            <p class="iconfont icon-icon iconOrder"></p>
                            <p class="text">会员订单</p>
                        </div>
                        <div class="item">
                            <p class="iconfont icon-icon iconOrder"></p>
                            <p class="text">约课订单</p>
                        </div>
                    </div>
                </li>
                <li>
                    <p class="title">我的账户</p>
                    <div class="item_box">
                        <div class="item">
                            <p class="iconfont icon-youhuiquan iconCard"></p>
                            <p class="text">优惠券</p>
                        </div>
                        <div class="item">
                            <p class="iconfont icon-cardb iconCard"></p>
                            <p class="text">学习卡</p>
                        </div>
                        <div class="item">
                            <p class="iconfont icon-huiyuan iconCard"></p>
                            <p class="text">会员</p>
                        </div>
                    </div>
                </li>
                <li>
                    <p class="title">自助服务</p>
                    <div class="item_box">
                        <div class="item">
                            <p class="iconfont icon-xiaoxitongzhitixinglingshenglingdang iconService"></p>
                            <p class="text">我的消息</p>
                        </div>
                        <div class="item">
                            <p class="iconfont icon-yijianfankui iconService"></p>
                            <p class="text">意见反馈</p>
                        </div>
                        <div class="item">
                            <p class="iconfont icon-kefu iconService"></p>
                            <p class="text">在线客服</p>
                        </div>
                        <div class="item" @click="FIT">
                            <p class="iconfont icon-shezhi iconService"></p>
                            <p class="text">设置</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "User",
        data() {
            return {};
        },
        computed: {
            // 登录进去用户info接口  头像 用户名
            userInfo() {
                return this.$store.state.user.userInfo;
            },
            // 登录进去用户info接口  头像 用户名 我的特色课 一对一辅导  剩余学习币
            centerInfoItem() {
                return this.$store.state.user.centerInfoItem;
            },
        },
        mounted() {
            // window.scrollTo(0,0)
            // 登录进去用户info接口  头像 用户名
            this.$store.dispatch("getUserinfo");
            this.$store.dispatch("getUCenterInfo"); // 登录进去用户info接口  头像 用户名 我的特色课 一对一辅导  剩余学习币
        },
        methods: {
            // 点击设置跳转
            FIT() {
                this.$router.push("/fit");
            },
        },
        filters: {
            prices(data) {
                if (data === undefined) {
                    return
                }
                return data / 100 + ".00";
            },
        }
        // beforeRouteEnter(to, from, next) {
        //     // 在渲染该组件的对应路由被 confirm 前调用
        //     // 不！能！获取组件实例 `this`
        //     // 因为当守卫执行前，组件实例还没被创建
        //
        //     let token = localStorage.getItem("adminToken") === null;
        //
        //     // console.log(token);
        //
        //     if (token) {
        //         next({path: "/logon"});
        //     } else {
        //         next();
        //     }
        // },
    };
</script>

<style lang="scss">
    .wrappp {
        width: 100%;
        background-color: #fff;
    }

    .top_box {
        width: 100%;
        height: 250px;
        background: #fb5500;
        border-radius: 0 0 250% 250%;
        position: absolute;
        z-index: 0;
    }

    .person {
        position: relative;
        top: 80px;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 999999;
        margin-bottom: 100px;
        border-bottom: 50px solid #f0f2f5;
    }

    .tab {
        width: 90%;
        height: 46vw;
        background: #fff;
        box-shadow: 0 0 3.2vw 0 rgba(0, 0, 0, 0.05);
        margin: 0 5%;
        border-radius: 1.33333vw;

        .info {
            overflow: hidden;

            .login {
                overflow: hidden;
                margin: 4vw 0 0 4vw;
                position: relative;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .avatar {
                    margin: 0 3.33333vw 0 0;
                    position: relative;
                    height: 16.53333vw;
                    background-color: #bdcdf1;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .img {
                        width: 15.73333vw;
                        height: 15.73333vw;
                        border-radius: 50%;
                        overflow: hidden;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    .vip_logon {
                        border-radius: 50%;
                        position: absolute;
                        width: 5.33333vw;
                        height: 5.33333vw;
                        right: -2.66667vw;
                        top: 0;
                    }
                }

                .extra {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .name {
                        font: inherit;
                        font-size: 4.26667vw;
                        color: #333;
                    }

                    .icon {
                        margin-left: 18px;

                        span {
                            font-size: 40px;
                            color: #fc7b3a;
                            font-weight: 800;
                        }
                    }
                }
            }
        }

        .mine {
            display: flex;
            justify-content: space-between;
            width: 100%;

            .my_study,
            .my_plan,
            .my_period {
                width: 33%;
                margin-top: 4vw;
                text-align: center;
                position: relative;

                .count {
                    color: #eb6100;
                    font-size: 6.4vw;
                    line-height: 9.33333vw;
                }

                .name {
                    font-size: 3.73333vw;
                    color: #595959;
                    margin-bottom: 1.6vw;
                }

                .note {
                    font-size: 2.93333vw;
                    color: #b7b7b7;
                }
            }
        }

        .to_set {
            position: absolute;
            top: 8.8vw;
            right: 5vw;
            width: 14.8vw;
            height: 6.66667vw;
            line-height: 50%;
            border-top-left-radius: 2.66667vw;
            border-bottom-left-radius: 2.66667vw;
            background-color: #eb6100;
            text-align: center;
            vertical-align: middle;

            span {
                display: inline-block;
                height: 6.66667vw;
                line-height: 6.66667vw;
                font-size: 3.2vw;
                vertical-align: middle;
                font-family: PingFang SC;
                font-weight: 400;
                color: #fff;
            }
        }
    }

    .top_share {
        width: 100%;
        padding: 4vw 4vw 0;
        background-color: #fff;
        box-sizing: border-box;

        .box {
            position: relative;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            height: 11.73333vw;
            background: linear-gradient(-90deg, #f2995a, #eb6100);
            border-radius: 5.86667vw;

            span {
                display: inline-block;
                width: 5.33333vw;
                height: 4.8vw;
                margin: -3vw 3vw 0 4vw;
                font-size: 50px;
                color: #fff;
            }

            div {
                p {
                    font-size: 3.2vw;
                    color: #fff;
                    line-height: 3.2vw;
                }
            }
        }

        .box:after {
            content: "";
            display: block;
            border-top: 0.4vw solid #fff;
            border-right: 0.4vw solid #fff;
            width: 2.66667vw;
            height: 2.66667vw;
            position: absolute;
            top: 50%;
            right: 5.33333vw;
            transform: translateY(-50%) rotate(45deg);
        }
    }

    .menu_box {
        width: 100%;
        padding: 0 4vw;
        background-color: #fff;
        box-sizing: border-box;

        li {
            padding: 5.33333vw 0;
            border-bottom: 1px solid #eee;

            .title {
                font-family: PingFangSC-Medium;
                font-size: 4.26667vw;
                color: #333;
                line-height: 4.26667vw;
            }

            .item_box {
                display: flex;
                justify-content: flex-start;
                width: 100%;

                .item {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    flex-direction: column;
                    width: 25%;
                    height: 16vw;
                    text-align: center;

                    .icon {
                        font-size: 53px;
                        color: #ff954c;
                    }

                    .text {
                        margin-top: 2.66667vw;
                        font-size: 3.2vw;
                        color: #666;
                        line-height: 3.2vw;
                    }

                    .iconOrder {
                        font-size: 45px;
                        color: #fc5500;
                    }

                    .iconCard {
                        font-size: 53px;
                        color: #ffaf00;
                    }

                    .iconService {
                        font-size: 45px;
                        color: #ff9a2a;
                    }
                }
            }
        }
    }
</style>